<!-- 顺时针或逆时针添加点标记 -->

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>区域规划-坐标获取工具</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
        }

        .custom-content-marker {
            position: relative;
            width: 25px;
            height: 34px;
        }

        .custom-content-marker img {
            width: 100%;
            height: 100%;
        }

        .custom-content-marker .close-btn {
            position: absolute;
            top: -6px;
            right: -8px;
            width: 15px;
            height: 15px;
            font-size: 12px;
            background: #ccc;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 15px;
            box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
        }

        .custom-content-marker .close-btn:hover {
            background: #666;
        }

        #startBtn,
        #generateBtn,
        #polygonBtn,
        #clearBtn {
            width: 90px;
            position: absolute;
            top: 10px;
            z-index: 1000;
            background-color: #1e90ff;
            border: none;
            color: #fff;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        #startBtn {
            top: 220px;
            left: 10px;
        }

        #clearBtn {
            top: 220px;
            left: 120px;
        }

        #generateBtn {
            top: 260px;
            left: 10px;
        }

        #polygonBtn {
            top: 260px;
            left: 120px;
        }

        #startBtn:hover,
        #generateBtn:hover,
        #polygonBtn:hover,
        #clearBtn:hover {
            background-color: #0066cc;
        }

        #coordinateBox {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            resize: none;
            background-color: rgba(0, 191, 255, 0.1);
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            color: #333;
            font-family: Arial, sans-serif;
        }

        /* 去掉logo */
        .amap-logo {
            display: none;
            opacity: 0 !important;
        }

        /* 去掉版本号 */
        .amap-copyright {
            opacity: 0;
        }
    </style>
</head>

<body>
    <button id="startBtn" onclick="toggleMarkers()">开始标点</button>
    <button id="clearBtn" onclick="clearMarkers()">清除所有</button>
    <button id="generateBtn" onclick="generateCoordinates()">生成坐标</button>
    <button id="polygonBtn" onclick="generatePolygon()">生成区域</button>
    <div id="container"></div>
    <textarea id="coordinateBox" readonly></textarea>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=aeed949bf9891d62e8ba6d4a49277cbc"></script>
    <script type="text/javascript">
        var markers = []; // 存储所有标记点
        var polygon; // 存储多边形对象
        var map = new AMap.Map("container", {
            zoom: 16,
            center: [120.759976, 30.125826], // 初始中心点
            resizeEnable: true
        });

        var addingMarkers = false; // 是否允许添加标记点

        //异步加载控件
        AMap.plugin(
            [
                "AMap.Scale",
                "AMap.HawkEye",
                "AMap.MapType",
                "AMap.Geolocation",
            ],
            function () {
                //添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                map.addControl(new AMap.Scale());

                //添加鹰眼控件，在地图右下角显示地图的缩略图
                map.addControl(new AMap.HawkEye({ isOpen: true }));

                //添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                map.addControl(new AMap.MapType());

                //添加定位控件，用来获取和展示用户主机所在的经纬度位置
                map.addControl(new AMap.Geolocation());
            }
        );

        map.on('click', function (e) {
            if (addingMarkers) {
                addMarker(e.lnglat);
            }
        });

        function toggleMarkers() {
            addingMarkers = !addingMarkers;
            var startBtn = document.getElementById('startBtn');
            startBtn.textContent = addingMarkers ? '取消标点' : '开始标点';
        }

        function addMarker(lnglat) {
            var marker = new AMap.Marker({
                position: lnglat,
                map: map
            });

            marker.on('click', function () {
                clearMarker(marker);
            });

            markers.push(marker); // 将新的标记点加入数组
        }

        function clearMarker(marker) {
            map.remove(marker);
            markers = markers.filter(m => m !== marker);
        }

        function clearMarkers() {
            if (polygon) {
                map.remove(polygon);
                polygon = null;
            }
            markers.forEach(function (marker) {
                map.remove(marker);
            });
            markers = [];
            document.getElementById('coordinateBox').value = ''; // 清空文本框里的数据
        }

        function generateCoordinates() {
            if (markers.length < 1) {
                alert('点标记数量必须大于等于1');
                return;
            }
            var coordinates = markers.map(function (marker) {
                var position = marker.getPosition();
                return '[' + position.lng + ', ' + position.lat + ']';
            });

            var coordinateBox = document.getElementById('coordinateBox');
            coordinateBox.value = coordinates.join(',\n');
            // coordinateBox.select(); // 选中文本
            document.execCommand('copy'); // 复制到剪贴板

            // alert('已将坐标复制到剪贴板：\n' + coordinates.join(',\n'));
        }

        function generatePolygon() {
            if (markers.length < 3) {
                alert('点标记数量必须大于等于3');
                return;
            }
            if (polygon) {
                map.remove(polygon);
            }
            var path = markers.map(function (marker) {
                return marker.getPosition();
            });

            polygon = new AMap.Polygon({
                path: path,
                fillColor: '#1791fc', // 多边形填充颜色
                borderWeight: 2, // 线条宽度
                strokeColor: '#0033FF', // 线条颜色
                strokeOpacity: 0.2, // 线条透明度
                fillOpacity: 0.4, // 填充透明度
                strokeStyle: 'solid', // 线条样式
                strokeDasharray: [10, 10] // 补充线条样式
            });

            map.add(polygon);
        }
    </script>
</body>

</html>